import React from "react";
import './TodoFooter.css';
import {useDispatch} from 'react-redux';
import { checkAllTodo, removeDoneTodo } from "../../../app/slices/todoSlice";

export default function TodoFooter() {
  //获得 dispatch
  let dispatch = useDispatch();

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={(e) => {
          dispatch(checkAllTodo(e.target.checked));
        }}/>
      </label>
      <span>
        <span>已完成0</span> / 全部2
      </span>
      <button className="btn btn-danger" onClick={() => {
        dispatch(removeDoneTodo());
      }}>清除已完成任务</button>
    </div>
  );
}
